<template>
  <view>
    <view
      class="titleModule"
      :style="{
        textAlign: `${info.align.value}`,
        background: `${info.style.bgColor}`,
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
      }"
    >
      <view
        class="info1"
        :style="{
          fontWeight: `${info.style.isBold ? 'bold' : ''}`,
          fontSize: `${info.style.size * 2}rpx`,
          color: `${info.style.color}`,
        }"
      >
        {{ info.input.text }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      default: {},
    },
  },
  mounted() {
    console.log(this.info);
  },
};
</script>

<style lang="scss" scoped>
.titleModule {
  .info1 {
    font-size: 28rpx;
  }
}
</style>
